<!-- todo
1.定义对外接口
2.内部字段接收
 -->

<script setup>
// defineProps接收父组件的值
const props = defineProps(['tabData']);
console.log("props。。。。");
console.log(props.tabData);
console.log("props。。。。222");

// 定义变量
const activeIndex = ref(0);
const tabList = ref([
    {
        state: 0,
        text: '全部',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 1,
        text: '待付款',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 2,
        text: '待收货',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 3,
        text: '待评价',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 4,
        text: '售后',
        loadingType: 'more',
        orderList: []
    }
]);
/***
父组件 --> 子组件
***/
tabList.value = props.tabData

const emit = defineEmits(['activeIndex'])
//顶部tab点击
const switchTab = (index) => {
    activeIndex.value = index;
    // 发送给父亲组件
    emit("activeIndex",index)
};
</script>
<template>
    <view class="navbar">
        <view v-for="(item, index) in tabList" :key="index" class="nav-item" :class="{ current: activeIndex === index }" @tap="switchTab(index)">
            {{ item.text }}
        </view>
    </view>
</template>
<style lang="scss" scoped>
.navbar {
    display: flex;
    height: 40px;
    padding: 0 5px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 10;
    .nav-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 15px;
        color: $font-color-dark;
        position: relative;
        &.current {
            color: $base-color;
            &:after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                width: 44px;
                height: 0;
                border-bottom: 2px solid $base-color;
            }
        }
    }
}
</style>
